<template>
	<view>
		<scroll-view :scroll-y="true" class="scrollContent" :enhanced="true" :bounces="false" :show-scrollbar="false">
			<view class="order_container">
				<view class="content w100p mb15">
					<view class="d-flex flex-column j-sb content_item">
						<view class="d-flex a-center mb15">
							<view class="line mr10"></view>
							<view class="title">订单基本信息</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">订单单号</view>
							<view class="value_item">{{orderDetailData.order.orderCode || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">订单属性</view>
							<view class="value_item">{{orderTypeList[orderDetailData.order.orderType].name}}</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">订单总额</view>
							<view class="value_item">{{orderDetailData.order.orderAmount || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">折扣金额</view>
							<view class="value_item">{{orderDetailData.order.orderDiscount || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">实付总额</view>
							<view class="value_item">{{orderDetailData.order.actuallyAmount || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">确认金额</view>
							<view class="value_item">
								<u-tag plain size="mini" :text="orderDetailData.order.confirmAmount" type="success"></u-tag>
							</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">审核状态</view>
							<view class="value_item">
								<u-tag plain size="mini" :text="payStatusList[orderDetailData.order.auditingStatus].name"
									:type="payStatusList[orderDetailData.order.auditingStatus].type"></u-tag>
							</view>
						</view>
						<view class="d-flex a-center j-sb mb15" v-if="orderDetailData.order.orderType!=2">
							<view class="title_item">配送方式</view>
							<view class="value_item">{{orderDetailData.order.deliveryMethod==0?'上门':'到店取'}}</view>
						</view>
						<view class="d-flex a-center j-sb">
							<view class="title_item">创建时间</view>
							<view class="value_item">{{orderDetailData.order.createTime || praseStrEmpty}}</view>
						</view>
					</view>
				</view>

				<view class="time mb15" v-if="orderDetailData.order.reserveDate">
					<view class="d-flex flex-column j-sb time_box">
						<view class="d-flex a-center mb15">
							<view class="line mr10"></view>
							<view class="title">预约上门时间</view>
						</view>
						<view class="d-flex a-center j-sb">
							<view class="title_item">上门时间</view>
							<view class="value_item">{{orderDetailData.order.reserveDate}}</view>
						</view>
					</view>
				</view>

				<view class="address mb15" v-if="orderDetailData.address.addressCode">
					<view class="d-flex flex-column j-sb address_box">
						<view class="d-flex a-center mb15">
							<view class="line mr10"></view>
							<view class="title">收货地址</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">收货人</view>
							<view class="value_item">{{orderDetailData.address.receiverName}}</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">手机号</view>
							<view class="value_item">{{orderDetailData.address.receiverPhone}}</view>
						</view>
						<view class="d-flex a-center j-sb">
							<view class="title_item">详细地址</view>
							<view class="value_item">{{orderDetailData.address.receiverArea}}{{orderDetailData.address.detailAdress}}
							</view>
						</view>
					</view>
				</view>

				<view class="address mb15" v-if="orderDetailData.order.auditingStatus != 0">
					<view class="d-flex flex-column j-sb address_box">
						<view class="d-flex a-center mb15">
							<view class="line mr10"></view>
							<view class="title">审核信息</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">审核时间</view>
							<view class="value_item">{{orderDetailData.order.updateTime}}</view>
						</view>
						<view class="d-flex a-center j-sb">
							<view class="title_item">审核内容</view>
							<view class="value_item">{{orderDetailData.order.auditingDesc}}</view>
						</view>
					</view>
				</view>

				<view class="center mb15">
					<view class="center_box">
						<view class="d-flex a-center mb15">
							<view class="line mr10"></view>
							<view class="title">订单商品信息</view>
						</view>
						<view>
							<view class="center_content  w100p mb15 pb10" v-for="item in orderDetailData.itemList"
								:key="item.productCode">
								<view class="d-flex">
									<view>
										<u--image :src="item.picUrl.split('&')[0]" width="160rpx" height="160rpx"></u--image>
									</view>
									<view class="d-flex flex-column j-sb ml10" style="width:520rpx">
										<view class="pro_name">{{item.productName}}</view>
										<view class="d-flex a-center j-sb">
											<view class="pro_name">x{{item.stock}}</view>
											<view class="pro_amout">￥{{item.itemAmout}}</view>
										</view>
									</view>
								</view>
								<view v-if="item.reserveDate" class="d-flex a-center makeTime mt10">
									<view>预约时间：</view>
									<view>{{item.reserveDate}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="d-flex a-center j-center pl10 pr10" v-if="orderDetailData.order.auditingStatus == 0">
					<view class="mr20">
						<u-button color="#38d19a" text="审核通过" @click="opneModel(0)"></u-button>
					</view>
					<view>
						<u-button type="error" text="审核拒绝" @click="opneModel(1)"></u-button>
					</view>

				</view>
			</view>
		</scroll-view>

		<u-modal :show="replyShow" :title="replyTitle" :showCancelButton="true" @confirm="closeReply"
			@cancel="replyShow = false">
			<view class="slot-content w100p h100p">
				<u--textarea v-model="replyDesc" placeholder="请输入内容"></u--textarea>
			</view>
		</u-modal>

		<u-toast ref="uToast" duration="500"></u-toast>
	</view>
</template>

<script>
	import {
		queryOrderDetailByPlatformApp,
		changePriceSucess,
		changePriceConfuse
	} from "@/api/index.js"

	export default {
		onLoad(opt) {
			if (opt.orderCode) {
				this.orderCode = opt.orderCode
			}
		},
		onShow() {
			this.queryOrderDetailByPlatformApp()
		},
		data() {
			return {
				orderCode: "",
				orderDetailData: {},
				orderTypeList: [{
						name: "预约单"
					},
					{
						name: "在线支付单"
					},
					{
						name: "门店订单"
					}
				],
				payStatusList: [{
						name: "待审核",
						type: "primary"
					},
					{
						name: "审核通过",
						type: "success"
					},
					{
						name: "审核拒绝",
						type: "error"
					}
				],
				replyShow: false,
				replyTitle: "",
				replyDesc: "",
				delta: 1
			}
		},
		methods: {
			queryOrderDetailByPlatformApp() {
				const that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				queryOrderDetailByPlatformApp({
					orderCode: that.orderCode,
				}).then(res => {
					that.orderDetailData = res.object
					uni.hideLoading()
				})
			},
			opneModel(val) {
				if (val == 0) {
					this.replyTitle = "审核通过"
				} else {
					this.replyTitle = "审核拒绝"
				}

				this.replyShow = true
			},
			
			closeReply() {
				const that = this

				if (!that.replyDesc) {
					uni.showToast({
						title: '请输入原因',
						duration: 1000,
						icon: 'none'
					});
					return
				}

				uni.showLoading({
					title: '加载中',
					mask: true
				});

				let api = ''
				if (that.replyTitle == '审核通过') {
					api = changePriceSucess
				} else {
					api = changePriceConfuse
				}

				api({
					orderCode: that.orderCode,
					auditingDesc: that.replyDesc
				}).then(res => {
					uni.hideLoading()

					that.$refs.uToast.show({
						type: "success",
						duration: "500",
						message: res.message,
						complete() {

							if (that.replyTitle == '审核通过') {
								uni.setStorageSync('auditTabCurrent', 2)
							} else {
								uni.setStorageSync('auditTabCurrent', 3)
							}

							uni.navigateBack({
								delta: parseInt(that.delta)
							})
						}
					})
				})
			}
		},
	};
</script>

<style lang="scss" scopeds>
	page {
		background-color: #f1f3f5;
	}

	.scrollContent {
		//可视高度，需要在多大的盒子中进行滑动
		height: 100vh;
		width: 100%;
	}

	.order_container {
		box-sizing: border-box;
		padding: 30rpx 28rpx;
		min-height: 100vh;
		background: linear-gradient(179deg, #46ebb0 0%, #ffffff 80%);
		font-family: Source Han Sans CN, Source Han Sans CN-500 !important;

		.title {
			color: #333333;
			font-size: 34rpx;
			font-weight: 600;
		}

		.line {
			width: 12rpx;
			height: 34rpx;
			background: #38d19a;
			border-radius: 3px;
		}

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;


			.content_item {
				width: 700rpx;
				// height: 600rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 16rpx;
				background-color: #fff;
				padding: 40rpx;

				.title_item {
					font-size: 28rpx;
					color: #333333;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
				}
			}
		}


		.time {
			display: flex;
			flex-direction: column;
			align-items: center;

			.time_box {
				width: 700rpx;
				// height: 300rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 16rpx;
				background-color: #fff;
				padding: 40rpx;

				.title_item {
					font-size: 28rpx;
					color: #333333;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
				}
			}

		}

		.address {
			display: flex;
			flex-direction: column;
			align-items: center;

			.address_box {
				width: 700rpx;
				// height: 300rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 16rpx;
				background-color: #fff;
				padding: 40rpx;

				.title_item {
					font-size: 28rpx;
					color: #333333;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
				}
			}

		}

		.center {
			display: flex;
			flex-direction: column;
			align-items: center;

			.center_box {
				width: 700rpx;
				padding: 40rpx;
				background: #ffffff;
				border-radius: 14rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);

				.center_content {
					border-bottom: 0.5px solid #dadada;
				}

				.center_content:last-child {
					border-bottom: 0px solid #dadada;
					margin-bottom: 0 !important;
					padding-bottom: 0 !important;
				}

				.pro_name {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
				}

				.pro_amout {
					font-size: 48rpx;
					color: #333333;
				}

				.makeTime {
					font-size: 28rpx;
					color: #999999;
				}
			}
		}

		.pay {
			display: flex;
			flex-direction: column;
			align-items: center;

			.pay_box {
				width: 700rpx;
				padding: 40rpx;
			}

			button {
				display: inline-block;
				width: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

	}

	.myPopup {
		// height: 600rpx;
		box-sizing: border-box;
		padding: 80rpx 60rpx 0 60rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-500;

		.title {
			font-size: 40rpx;
			color: #333333;
			font-weight: 500;
		}

		.content_item {
			font-size: 32rpx;
			color: #666666;
			font-weight: 400;
		}

		.mybutton button {
			width: 50%;
		}
	}
</style>